import { FC, useCallback, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { Button, Form, Input } from 'antd-mobile'

import storage from '@/utils/storageManage'
import { postLogin } from '@/modules/auth'

import logo from '@/assets/img/logo.png'
import './style.less'
interface IState {
  account: string
  password: string
}

// FC是函数组件的类型声明，从react中直接导入即可
const Index: FC<any> = props => {
  // redux相关，useState等，必须放在最前面
  const history = useHistory()
  const [smsType, setSmsType] = useState(false)
  const onFinish = useCallback(({ account, password }: IState) => {
    postLogin(account, password).payload.then((res: any) => {
      if (res.status === 200) {
        storage.set('token', res.data.token, res.data.expires_time)
        // 跳转 state里有origin表示从路由守卫过来的，否则跳转到首页
        history.push(props.location.state.origin || '/')
      }
    })
  }, [])

  return (
    <div className="docwrap login">
      <div className="logo">
        <img src={logo} alt="" />
      </div>
      <div className="form-wrap">
        <Form
          onFinish={onFinish}
          footer={
            <Button type="submit" color="danger" block={true}>
              登录
            </Button>
          }
        >
          {!smsType ? (
            <>
              <Form.Item
                name="account"
                rules={[{ required: true, message: '请填写账号' }]}
                hasFeedback={false}
              >
                <Input placeholder="输入手机fdadf号码" />
                {/* <span className="iconfont">&#x100a9;</span> */}
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: '请填写密码' }]}
                hasFeedback={false}
              >
                <Input placeholder="填写登录密码" />
                {/* <span className="iconfont">&#x100aa;</span> */}
              </Form.Item>
            </>
          ) : (
            <>
              <Form.Item
                name="account"
                rules={[{ required: true, message: '请填写账号' }]}
                hasFeedback={false}
              >
                {/* <span className="iconfont">&#x100aa;</span> */}
                <Input placeholder="输入手机号码" />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: '请填写密码' }]}
                hasFeedback={false}
              >
                {/* <span className="iconfont">&#x100aa;</span> */}
                <Input placeholder="填写验证码" />
                <Button type="submit" color="default" fill="none" block={true}>
                  获取验证码
                </Button>
              </Form.Item>
            </>
          )}
        </Form>
        <div className="type-switch">
          <div onClick={() => setSmsType(!smsType)}>{smsType ? '账号登陆' : '快速登录'}</div>
        </div>
      </div>
    </div>
  )
}
export default Index
